<template>
  <div id="demo-icon" class="demo-icon">
    <li v-for="item in icons" :key="item.icon_id">
      <MIcon :type="item.font_class" style="font-size: 28px" />
      <p class="font-name">{{ item.name }}</p>
    </li>
  </div>
</template>

<script>
import iconList from "@/assets/iconfont/iconfont.json";
import MIcon from "@/components/MIcon/index";
export default {
  name: "demo-icon",
  created() {
    console.log(iconList);
  },
  computed: {
    icons() {
      return iconList.glyphs;
    },
  },
  components: { MIcon },
};
</script>

<style scoped lang="less">
.demo-icon {
  width: 980px;
  margin: 0 auto;
  overflow: hidden;
  li {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 10px;
    cursor: pointer;
    .font-name {
      margin-bottom: 0;
    }
    &:nth-child(10n + 10) {
      margin-right: 0;
    }
  }
}
</style>
